<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除默认的ul左内边距 */
        ul {
            padding-left: 0;
        }

        /* 去除li默认样式 整体增加外边距 */
        li {
            margin: 0 10px;
            list-style: none;
        }

        /* 去除a标签默认下划线 修改a标签文字颜色 */
        a {
            color: #000;
            text-decoration: none;
        }

        /* 修改p标签外边距 */
        p {
            margin: 0;
        }

        /* 修改dl外边距 */
        dl {
            margin: 0 20px;
        }

        /* 修改dd默认最外边距 */
        dd {
            margin-left: 0;
        }

        /* 整体横向布局，方便查看 */
        .transverse {
            display: flex;
        }

        /* 设置轮播图宽度 */
        .carousel img {
            width: 200px;
        }

        /* 设置底部文字颜色 */
        li li a,
        li p,
        .right a,
        dd p a,
        dd p {
            color: #7d7d7d;
        }

        /* 修改dd下p元素上下间距 */
        dd p {
            margin-top: 5px;
        }

        /* 设置底部链接外边距 */
        li li {
            margin: 5px 0;
        }

        /* 底部查看详情右对齐 */
        .right {
            text-align: right;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <ul class="nav transverse">
        <li><a href="script:;" title="秒杀">秒杀</a></li>
        <li><a href="script:;" title="优惠券">优惠券</a></li>
        <li><a href="script:;" title="PLUS会员">PLUS会员</a></li>
        <li><a href="script:;" title="品牌闪购">品牌闪购</a></li>
        <li><a href="script:;" title="拍卖">拍卖</a></li>
        <li><a href="script:;" title="京东家电">京东家电</a></li>
        <li><a href="script:;" title="京东超市">京东超市</a></li>
        <li><a href="script:;" title="京东生鲜">京东生鲜</a></li>
        <li><a href="script:;" title="京东国际">京东国际</a></li>
        <li><a href="script:;" title="京东金融">京东金融</a></li>
    </ul>
    <hr>
    <!-- 轮播图 -->
    <div class="carousel">
        <!-- 图片列表 -->
        <ul class="imgs transverse">
            <li><a href="script:;"><img
                        src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603339051&di=a7669538aa86f51a8cba6c6feb8ad437&src=http://a3.att.hudong.com/64/52/01300000407527124482522224765.jpg"
                        alt="图片"></a></li>
            <li><a href="script:;"><img
                        src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603339051&di=a7669538aa86f51a8cba6c6feb8ad437&src=http://a3.att.hudong.com/64/52/01300000407527124482522224765.jpg"
                        alt="图片"></a></li>
            <li><a href="script:;"><img
                        src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603339051&di=a7669538aa86f51a8cba6c6feb8ad437&src=http://a3.att.hudong.com/64/52/01300000407527124482522224765.jpg"
                        alt="图片"></a></li>
            <li><a href="script:;"><img
                        src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603339051&di=a7669538aa86f51a8cba6c6feb8ad437&src=http://a3.att.hudong.com/64/52/01300000407527124482522224765.jpg"
                        alt="图片"></a></li>
            <li><a href="script:;"><img
                        src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603339051&di=a7669538aa86f51a8cba6c6feb8ad437&src=http://a3.att.hudong.com/64/52/01300000407527124482522224765.jpg"
                        alt="图片"></a></li>
        </ul>
        <!-- 左右按钮 -->
        <div class="imgbtn transverse">
            <a class="leftbtn" href="script:;" title="上一张">&lt;</a>
            <a class="rightbtn" href="script:;" title="下一张">&gt;</a>
        </div>
        <!-- 小部件列表 -->
        <ol class="tips transverse">
            <li><a href="script:;">1</a></li>
            <li><a href="script:;">2</a></li>
            <li><a href="script:;">3</a></li>
            <li><a href="script:;">4</a></li>
            <li><a href="script:;">5</a></li>
            <li><a href="script:;">6</a></li>
        </ol>
    </div>
    <hr>
    <!-- 底部导航链接 -->
    <!-- 无序列表实现 -->
    <ul class="transverse">
        <li>
            <h4>购物指南</h4>
            <ul class="links">
                <li><a href="script:;">购物流程</a></li>
                <li><a href="script:;">会员介绍</a></li>
                <li><a href="script:;">生活旅行</a></li>
                <li><a href="script:;">常见问题</a></li>
                <li><a href="script:;">大家电</a></li>
                <li><a href="script:;">联系客服</a></li>
            </ul>

        </li>
        <li>
            <h4>配送方式</h4>
            <ul>
                <li><a href="script:;">上门自提</a></li>
                <li><a href="script:;">211限时达</a></li>
                <li><a href="script:;">配送服务查询</a></li>
                <li><a href="script:;">费送费收费标准</a></li>
                <li><a href="script:;">海外配送</a></li>
            </ul>
        </li>
        <li>
            <h4>支付方式</h4>
            <ul>
                <li><a href="script:;">货到付款</a></li>
                <li><a href="script:;">在线支付</a></li>
                <li><a href="script:;">分期付款</a></li>
                <li><a href="script:;">公司转账</a></li>
            </ul>
        </li>
        <li>
            <h4>售后服务</h4>
            <ul>
                <li><a href="script:;">售后政策</a></li>
                <li><a href="script:;">价格保护</a></li>
                <li><a href="script:;">退款说明</a></li>
                <li><a href="script:;">返修/退换货</a></li>
                <li><a href="script:;">取消订单</a></li>
            </ul>
        </li>
        <li>
            <h4>特色服务</h4>
            <ul>
                <li><a href="script:;">夺宝岛</a></li>
                <li><a href="script:;">DIY装机</a></li>
                <li><a href="script:;">延保服务</a></li>
                <li><a href="script:;">京东E卡</a></li>
                <li><a href="script:;">京东通信</a></li>
                <li><a href="script:;">京鱼座智能</a></li>
            </ul>
        </li>
        <li>
            <h4>京东自营覆盖区县</h4>
            <p>京东已向全国2661个区县提供自<br />营配送服务,支持货到付款、POS<br />机刷卡和售后门服务。</p>
            <p class="right"><a href="script:;">查看详情&gt;&gt;</a></p>
        </li>
    </ul>
    <hr>
    <!-- 定义列表实现 -->
    <div class="transverse">
        <dl>
            <dt>购物指南</dt>
            <dd>
                <p><a href="script:;">购物流程</a></p>
                <p><a href="script:;">会员介绍</a></p>
                <p><a href="script:;">生活旅行</a></p>
                <p><a href="script:;">常见问题</a></p>
                <p><a href="script:;">大家电</a></p>
                <p><a href="script:;">联系客服</a></p>
            </dd>
        </dl>
        <dl>
            <dt>配送方式</dt>
            <dd>
                <p><a href="script:;">上门自提</a></p>
                <p><a href="script:;">211限时达</a></p>
                <p><a href="script:;">配送服务查询</a></p>
                <p><a href="script:;">配送费收费标准</a></p>
                <p><a href="script:;">海外配送</a></p>
            </dd>
        </dl>
        <dl>
            <dt>支付方式</dt>
            <dd>
                <p><a href="script:;">货到付款</a></p>
                <p><a href="script:;">在线支付</a></p>
                <p><a href="script:;">分期付款</a></p>
                <p><a href="script:;">公司转账</a></p>
            </dd>
        </dl>
        <dl>
            <dt>售后政策</dt>
            <dd>
                <p><a href="script:;">售后政策</a></p>
                <p><a href="script:;">价格保护</a></p>
                <p><a href="script:;">退款说明</a></p>
                <p><a href="script:;">返修/退换货</a></p>
                <p><a href="script:;">取消订单</a></p>
            </dd>
        </dl>
        <dl>
            <dt>特色服务</dt>
            <dd>
                <p><a href="script:;">夺宝岛</a></p>
                <p><a href="script:;">DIY装机</a></p>
                <p><a href="script:;">延保服务</a></p>
                <p><a href="script:;">京东E卡</a></p>
                <p><a href="script:;">京东通信</a></p>
                <p><a href="script:;">京鱼座智能</a></p>
            </dd>
        </dl>
        <dl>
            <dt>京东自营覆盖区县</dt>
            <dd>
                <p>京东已向全国2661个区县提供自<br />营配送服务,支持货到付款、POS<br />机刷卡和售后门服务。</p>
                <p class="right"><a href="">查看详情&gt;&gt;</a></p>
            </dd>
        </dl>
    </div>

</body>

</html>